<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

        window.onload = function () {

            //获取count
            var count = document.getElementById("count");

            //实践案例：使count中的内容，自动切换

            /**
             * 方案1
             * JS的程序的执行速度是非常非常快的
             *    如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
             */
            /*for(var i=0 ; i<10000 ; i++){
                count.innerHTML = i;
                //点击后循环下一次
                alert("hello"+i);
            }*/

            /**
             * 方案2
             * setInterval()
             *    - 定时调用
             *    - 可以将一个函数，每隔一段时间执行一次
             *    - 参数：
             *        1.回调函数，该函数会每隔一段时间被调用一次
             *        2.每次调用间隔的时间，单位是毫秒
             *
             *    - 返回值：
             *        返回一个Number类型的数据
             *        这个数字用来作为定时器的唯一标识
             *
             * clearInterval()
             * 可以用来关闭一个定时器，方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
             */
            var num = 1;
            //每隔1秒，执行一次回调函数，毫秒为单位
            var timer = setInterval(
                function () {
                    count.innerHTML = num++;
                    //关闭定时器边界条件
                    if (num == 11) {
                        clearInterval(timer);
                    }
                }, 1000);
            console.log(timer);
        };
    </script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>
